<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>2.使用js创建虚拟dom</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>

    <script type="text/javascript">
      // 1.创建虚拟dom
      // React.createElement("标签名","标签属性","标签内容")
      const virtualDom = React.createElement(
        "h1",
        { id: "title" },
        "Hello React"
      );
      // 2.渲染页面到元素
      // ReactDOM.render("虚拟dom","容器")
      ReactDOM.render(virtualDom, document.getElementById("root"));
      // 为啥要用jsx? 需求:h1中包一个 span 然后span中放入 Hello React

      /**
       * 1. jsx语法： const virtualDom = <h1 id="title"><span>Hello React</span></h1>;
       *
       * 2. js语法：  const virtualDom = React.createElement( "h1",{ id: "title" }, React.createElement("span", {}, "Hello React"));
       *
       */
    </script>
  </body>
</html>
